<template>
  <div class="result">
    <div class="header">
    <a href="javascript:history.go(-2)"><img src="../assets/images/retreat.png" alt=""/></a>
    <span>支付结果</span>
    </div>
    <div id="earnings">
    <h4 v-if="result">
        <span ><img src="../assets/images/check_mark.png" alt=""/></span>
        支付成功
    </h4 >
    <h4 v-else>
        <span ><img src="../assets/images/vp-04.png" alt=""/></span>
        支付失败
    </h4>
    <!-- <p>恭喜你，获得<span>10</span>积分</p> -->
    <!--<div>积分已放入积分账户，下次下单可1:1抵扣现金，请登录<a href="#">盖付通APP</a>，进入壹键哥个人中心查看</div>-->
    <div>可登陆<a href="javascript:void(0)">壹键哥APP</a>，进入壹键哥查看本次消费订单</div>
    </div>

    <div class="page">
    <p><img src="../assets/images/page_01.jpg" alt=""/></p>
    <p><img src="../assets/images/page_02.jpg" alt=""/></p>
    <p><img src="../assets/images/page_03.jpg" alt=""/></p>
    </div>

    <button id="open-app" @click="openGft">打开壹键哥APP</button>
    <open-app ref="openApp"></open-app>

  </div>
</template>

<script>
import openApp from './OpenApp'
export default {
    name: 'result',
    components: {
        openApp
    },
    data () {
        return {
            result: null
        }
    },
    created () {
        this.result = parseInt(this.$route.query.pay_result) || 0
    },
    methods: {
        openGft () {
            this.$refs.openApp.openApp()
        }
    }
}
</script>
<style scoped>
/*主体样式*/
#earnings {
  text-align: center;
}
#earnings h4 {
  margin: 1.2rem 0 0.6rem;
  line-height: 1.0667rem;
}
#earnings h4 > span {
  display: inline-block;
  width: 1.0667rem;
  height: 1.0667rem;
  border: 1px solid #69c7bd;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
}
#earnings h4 > span img {
  width: 0.5867rem;
  height: 0.4133rem;
  vertical-align: middle;
}

#earnings > div {
  width: 45%;
  padding: 0.5333rem 0.2667rem;
  background: #e2f8f9;
  margin: 1.0667rem auto;
  text-align: left;
  line-height: 0.6667rem;
  font-size: 0.32rem;
}

.page {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 0.1333rem;
}
.page p {
  float: left;
  width: 33.33%;
  text-align: center;
  margin-top: 1.6rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.page p:nth-child(2) {
  margin-top: 0.8rem;
}
.page p:last-child {
  margin: 0;
}
.page p img {
  width: 80%;
  height: 3.56rem;
  margin: 0 0.2667rem;
  -webkit-box-shadow: 0.0667rem 0.0667rem 0.1333rem #7a7a7a;
  -moz-box-shadow: 0.0667rem 0.0667rem 0.1333rem #7a7a7a;
  box-shadow: 0.0667rem 0.0667rem 0.1333rem #7a7a7a;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#open-app {
  display: block;
  width: 7.2rem;
  height: 1.2rem;
  background: #53beb3;
  color: #fff;
  margin: 0.8rem auto;
}
</style>

